<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>趣玩</title>
    <link rel="icon" type="images/x-ico" href="images/favicon.ico">
    <link rel="stylesheet" href="css/resest.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <header>

    </header>
    <section>
        <div class="carousel">
            <ul class="carousel-img">
                <!-- <li><img src="images/1-4-0.jpg" alt=""></li>
                <li> <img src="images/1-4-1.jpg" alt=""></li>
                <li> <img src="images/1-4-2.jpg" alt=""></li> -->
            </ul>
            <ul class="carousel-on">
                <li class="on">
                    <p></p>
                </li>
                <li>
                    <p></p>
                </li>
                <li>
                    <p></p>
                </li>
            </ul>
            <p class="carousel-left"><span class="iconfont icon-xiangzuojiantou"></span></p>
            <p class="carousel-right"><span class="iconfont icon-xiangyoujiantou"></span></p>
        </div>
        <div class="goods">
            <div class="goods-box">
                <div class="goods-header">
                    <p>人气推荐</p>
                    <p>精品推荐</p>
                    <p>热销排行</p>
                </div>
                <ul class="goods-show">
                    <li><img src="images/1-5.jpg" alt="">
                        <a href="">每食酷手工网红萝卜千238克*2瓶装
                        </a>
                        <p> ￥ 39.90</p>
                    </li>
                    <li><img src="images/1-5-0.jpg" alt="">
                        <a href="">唱吧小巨蛋麦克风Q3

                        </a>
                        <p> ￥499.00</p>
                    </li>
                    <li><img src="images/1-5-1.jpg" alt="">
                        <a href="">3D立体纯手绘动物杯

                        </a>
                        <p> ￥ 59.00</p>
                    </li>
                    <li><img src="images/1-5-2.jpg" alt="">
                        <a href="">摩飞刀具砧板消毒器MR1000

                        </a>
                        <p> ￥ 398.00</p>
                    </li>
                    <li><img src="images/1-5-3.jpg" alt="">
                        <a href="">生活元素电热饭盒F27

                        </a>
                        <p> ￥199.00</p>
                    </li>
                    <li><img src="images/1-5-4.jpg" alt="">
                        <a href="">素士X3U升级版声波电动牙刷

                        </a>
                        <p> ￥ 299.00</p>
                    </li>
                    <li><img src="images/1-5-5.jpg" alt="">
                        <a href="">日本tomoni多功能蒸汽拖把TCC-1301

                        </a>
                        <p> ￥409.00</p>
                    </li>
                    <li><img src="images/1-5-6.jpg" alt="">
                        <a href="">根元舌尖卫士糖果蛋冰箱除味净化器

                        </a>
                        <p>￥339.00</p>
                    </li>
                </ul>
            </div>
        </div>
        <img src="images/1-6.jpg" alt="" class="fixedness">
        <div class="choiceness">
            <div class="choiceness-center">
                <div class="choiceness-top">
                    <p>精选好物</p>
                    <p>我们在寻找，对生活有态度的你</p>
                </div>
                <ul class="choiceness-end">
                    <li><img src="images/1-7.png" alt=""></li>
                    <li><img src="images/1-8.png" alt=""></li>
                    <li><img src="images/1-9.png" alt=""></li>
                </ul>
            </div>
        </div>
        <img src="images/1-10.jpg" alt="" class="fixedness">
        <img src="images/1-11.jpg" alt="" class="fixedness">
    </section>
    <footer>

    </footer>
</body>

</html>
<script src="js/jquery.js"></script>
<script>
    $("header").load("header.html");
    $("footer").load("footer.html");
    $(".carousel-img").children().eq(0).siblings().hide();
    function Carousel() {
        this.index = 0;
        this.timer = null;
        this.eventBind = function () {
            this.getData();
            this.arrowLeft();
            this.arrowRight();
            this.liClicks();
            this.autoplay();
            this.hover();
        }
        this.getData=function(){
            $.get(
                'goodsAndShoppingCart/bannerGet.php',
                function(data){
                   let arr=JSON.parse(data);
                   let str="";
                   arr.forEach((item,index) => {
                    str+=`<li><img src=${item.img} alt=""></li>`;
                   });
                $(".carousel-img").html(str)
                }
            )
        }
        //点击左边箭头
        this.arrowLeft = function () {
            let that = this;
            $(".carousel-right").on("click", function () {
                that.index++;
                if (that.index == 3) {
                    that.index = 0;
                }
                that.getImg();
            })

        }
        //点击右边箭头
        this.arrowRight = function () {
            let that = this;
            $(".carousel-left").on("click", function () {
                that.index--;
                if (that.index == -1) {
                    that.index = 2;
                }
                that.getImg()
            })
        }
        //改变图片和小点
        this.getImg = function () {
            $(".carousel-img").children().eq(this.index).stop().show()
                .siblings().hide();
            $(".carousel-on").children().eq(this.index).attr("class", "on")
                .siblings().removeAttr("class")
        }
        //点击小点
        this.liClicks = function () {
            $(".carousel-on").on("click", "li", function () {
                $(".carousel-img").children().eq($(this).index()).stop().show()
                    .siblings().hide();
                console.log($(this))
                $(this).attr("class", "on").siblings().removeAttr("class")
            })
        }
        //自运行
        this.autoplay = function () {
            this.timer = setInterval(function () {
                $(".carousel-right").triggerHandler("click");
            }, 2000)
        }
        //划过停止自运行
        this.hover = function () {
            let that = this;
            $(".carousel").hover(function () {
                clearInterval(that.timer);
            }, function () {
                that.autoplay();
            })
        }
    }
    let c = new Carousel();
    c.eventBind();
    $(".goods-show li a").each(function (index, item) {
        $(item).attr("title", `${$(item).text()}`)
    })
    
     
</script>